<template>
    <!-- 表格组件 -->
    <el-table :data="tableData" border>
        <el-table-column width="180" label="日期">
            <template #default="scope">
                <div style="display: flex; align-items: center">
                    <el-icon>
                        <timer />
                    </el-icon>
                    <span style="margin-left: 10px">{{ scope.row.admin_create_time }}</span>
                </div>
            </template>
        </el-table-column>
        <el-table-column width="120" label="昵称" prop="admin_name" />
        <el-table-column width="150" label="邮箱" prop="admin_email" />
        <el-table-column width="110" label="电话" prop="admin_phone" />
        <!-- <el-table-column width="110" label="年龄" prop="admin_age" /> -->
        <!-- <el-table-column width="110" label="性别" prop="admin_sex" /> -->
        <!-- <el-table-column label="头像">
            <template #default="scope">
                <img style="width: 120px; height: 50px;" v-if="scope.row.admin_avatar" :src="scope.row.admin_avatar"
                    alt="">
            </template>
        </el-table-column> -->
        <!-- <el-table-column width="210" label="地址" prop="admin_adress" /> -->
        <el-table-column>
            <template #header>操作</template>
            <template #default="scope">
                <el-button size="small" @click="handleDelete(scope.$index, scope.row)" type="danger">删除</el-button>
            </template>
        </el-table-column>
    </el-table>


</template>

<script lang="ts" setup>
// 导入消息提示框
import { ElMessage } from 'element-plus';
import { reactive, ref } from 'vue';
import { adminRemoveApi, adminItemsApi, adminAllApi } from '../../http/request';
import moment from "moment";
// 用户临时身份token
let token = localStorage.getItem('token');
// 定义数据结构
interface Admin {
    admin_create_time: string
    admin_name: string
    admin_email: string
    admin_phone: string
    admin_avatar: string
    admin_address: string,
    admin_age: string,
    admin_sex: string,
    admin_id: string
}
// 记录数据
let tableData: Admin[] = reactive([]);
// 交互行为2
const handleDelete = (index: number, row: Admin) => {
    // 获取用户id
    let admin_id = row.admin_id;
    // console.log("图片ID:",admin_id);
    if (confirm('您确定删除该管理员吗')) {
        // 删除用户和图片
        adminRemoveApi({ token, admin_id })
            .then(
                (data: any) => {
                    if (data.code == 200) {
                        tableData.splice(index, 1)
                    }
                    // 提示
                    ElMessage({
                        message: data.msg,
                        type: 'warning',
                    });
                }
            )
    }
}
// 初始化用户列表
const initAdminList = async (page_num: number, page_size: number) => {
    // 调用用户列表接口
    await adminItemsApi({ page_num, page_size })
        .then(
            (data: any) => {
                if (data.code == 200) {
                    tableData.splice(0, tableData.length);
                    let { result } = data;
                    // console.log(result);
                    result.map((item: any) => {
                        if (item.admin_create_time) {
                            item.admin_create_time = moment(new Date(item.admin_create_time)).format('YYYY-MM-DD hh:mm:ss')
                        }
                        // console.log("item:", item)
                        tableData.push(item)
                    });
                    // console.log(tableData)
                }
            }
        )
}
// 初始化 
initAdminList(1, 10);
// 统计用户数量
let total2 = ref(50);
adminAllApi()
    .then(
        data => {
            if (data.code == 200) {
                //console.log(data)
                total2.value = data.total;
            }
        }
    )
</script>